// 提供复用逻辑函数
/**
 * 数据懒加载
 * @param {Elemnet} target - dom对象
 * @param {Function} apiFn -api接口
 */
import { useIntersectionObserver } from '@vueuse/core'
// 该函数目的，懒加载数据=>需要获取数据时获取
export const useLazyData = (apiFn) => {
  const result = ref([]) // 数据结构最好遵循
  const target = ref(null)
  const { stop } = useIntersectionObserver( // stop是停止观察类似watch
    target, // 监听的目标元素
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting是否进入可视区
      if (isIntersecting) {
        stop() // 停止监听
        // 调用传入的api函数
        apiFn().then(data => {
          result.value = data.result
        })
      }
    },
    // 配置参数
    { // 0 只要相交的比例>0就触发
      threshold: 0 // 设置触发门槛，即元素进入多少被认为是触发检测
    }
  )
  return { result, target }
}
